<template>
    <span>
        <div class="desktop" :style="desktopStyle">
            <el-tooltip
                v-for="evidence in evidences"
                :key="evidence.item.name"
                slot="reference"
                effect="light"
                :content="evidence.item.name ? evidence.item.name : evidence.name"
                placement="top"
            >
                <drag class="drag" @dragend="dragend(evidence)">
                    <img
                        class="evi-icon"
                        :style="{ width: `${size}px` }"
                        :src="'/api' + evidence.desktopIconImageUrl"
                        @click="itemClick(evidence)"
                    >
                </drag>
            </el-tooltip>
        </div>
        <!-- 凭证窗口 -->
        <eviden-editor
            v-if="active"
            :title="active.name"
            :mode="'exam'"
            :modal="false"
            :init="active"
            :action="active.action"
            :form="editorForm(active)"
        />
    </span>
</template>
<script>
import isEqual from 'lodash/isEqual'
import evidenceEditor from '@/pages/material/evidence/evidenceEditor'

export default {
    name: 'desktop-item',
    props: ['desktopArea', 'items', 'size', 'dropItem'],
    components: { 'eviden-editor': evidenceEditor },
    data() {
        return {
            evidences: [],
            active: null
        }
    },
    watch: {
        desktopItems: function(newItems, oldItems) {
            if (!isEqual(newItems, oldItems)) {
                this.getEdvidences()
            }
        }
    },
    computed: {
        desktopItems() {
            return this.items.filter(item => item.type === 'desktopItem' && item.display !== false)
        },
        desktopStyle() {
            if (this.desktopArea) {
                return {
                    width: `${this.desktopArea.w}px`,
                    height: `${this.desktopArea.h}px`,
                    left: `${this.desktopArea.x}px`,
                    top: `${this.desktopArea.y}px`,
                    transform: `rotate(${this.desktopArea.rotate}deg)`
                }
            }
        }
    },
    methods: {
        dragend(evidence) {
            const { item } = evidence
            this.$emit('itemDrag', item)
            if (item.onDrag && this.dropItem) {
                const { value, show, hide } = item.onDrag
                if (value && value === this.dropItem.name) {
                    // 拖拽成功后, 显示自己
                    if (show) {
                        show.split(',').forEach(itemName => {
                            if (itemName === item.name) {
                                this.active = evidence
                            }
                        })
                    }
                }
            }
        },
        itemClick(evidence) {
            const { onChange, onClick, onDrag } = evidence.item
            if (onChange && onChange.value) {
                if (!onDrag || !onDrag.show || onDrag.show.split(',').indexOf(evidence.item.name) < 0) {
                    this.active = evidence
                }
            }
            if (onClick && (onClick.pages || onClick.show)) {
                this.$emit('itemClick', evidence.item)
            }
        },
        getEdvidences() {
            this.evidences = []
            const promises = this.desktopItems.map(item => {
                const {
                    content: { id }
                } = item
                return new Promise(resolve => {
                    this.$store.dispatch('getEvidence', {
                        id,
                        cb: evidence => {
                            evidence.item = item
                            evidence.action = item.content.action
                            resolve(evidence)
                        }
                    })
                })
            })
            Promise.all(promises).then(evidences => {
                this.evidences = [...evidences]
            })
        },
        editorForm(evidence) {
            return {
                actions: {
                    cancel: () => {
                        this.active = null
                    },
                    confirm: result => {
                        this.$emit('itemConfirm', evidence.item, result)
                        this.active = null
                    }
                }
            }
        }
    }
}
</script>
<style lang="less">
.desktop {
    position: relative;
    .drag {
        display: inline-block;
    }
    .evi-icon {
        margin: 3px;
        box-shadow: 2px 3px 3px lightgray;
        &:hover {
            transform: scale(1.05);
            transition: 0.3s;
        }
    }
}
</style>


